<template>
  <div>
    <h1 class="title">demo_3的标题</h1>
    <el-divider content-position="left">在模版中处理逻辑</el-divider>
    <!-- 不建议直接在模版里面写逻辑处理代码 -->
    {{ list.join(",") }}
    <el-divider content-position="left">使用计算属性</el-divider>
    <!-- 建议使用计算属性去写逻辑 -->
    <!-- 第一种写法 -->
    {{ listStr }}
    <br />
    <!-- 第二种写法 -->
    {{ listSet }}
    <br />
    <el-button @click="editList">修改list</el-button>
    <el-divider content-position="left">jsonStr</el-divider>
    {{ jsonStrCom }}
    <br />
    <el-button @click="editJsonStr">修改jsonStr</el-button>
    <el-divider content-position="left"></el-divider>
    {{ uuidStr }}
    <template v-for="item in 10000">
      <div :key="item">
        <el-button>按钮{{ item }}</el-button>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Demo_3",
  data() {
    return {
      list: ["张三", "李四", "王五"],
      jsonStr: "",
      resData: {
        xdapFormConfig: {
          id: "6639fb1589abf719bcae4cbb",
          tenantId: "408928529380540417",
          status: "ENABLE",
          modelCode: "view_575743139269050368",
          detailPage: {
            formComponents: [
              {
                uuid: "eb014275835579a937fbb813",
                boId: "575743140279877632",
                boCode: "view_575743139269050368~widget_575743139537485824",
                label: "单据号",
                componentType: "FORM_DOCUMENT_NUMBER",
                placeholder: "提交后生成",
                maxLengthLimit: 200,
                width: 6,
                height: 1,
                hidden: false,
                uniqueCheck: true,
                modelCode: "view_575743139269050368",
                modelField: "view_575743139269050368.widget_575743139537485824",
                fieldFullName: "评分组件-单据号",
                children: [],
                showDesensitizationMark: false,
                lovAssociated: false,
                showLocationCenter: false,
                userPermission: false,
                useInEdit: false,
                dataEncryptStatus: false,
                dataEncryptDisabled: false,
                saved: true,
                saveWithHidden: false,
                documentNumTempGenerate: false,
                isArraySubitem: false,
                deleteButtonStatus: "ENABLE",
                copyButtonStatus: "ENABLE",
                newButtonStatus: "ENABLE",
                titleDescription: "",
                importButtonStatus: "ENABLE",
                exportButtonStatus: "ENABLE",
                mobileDisplayNum: 3,
                mobileSonTableIndex: false,
                modelName: "评分组件",
                modelFieldName: "单据号",
                validatorStatus: false,
                mobileWidth: 12,
                labelI18nAssociated: false,
                placeholderI18nAssociated: false,
                titleDescriptionI18nAssociated: false,
                titleDescriptionOptionsI18nAssociated: false,
                staticDefaultValueI18nAssociated: false,
                queryPageNum: 50,
                tabDisplayFlag: true,
              },
              {
                uuid: "cb0f4dbea6904055cea60830",
                boId: "575743140279877633",
                boCode: "view_575743139269050368~widget_575743139537485825",
                label: "评分值",
                componentType: "FORM_NUMBER_INPUT",
                placeholder: "请输入",
                width: 6,
                height: 1,
                hidden: false,
                readOnly: false,
                required: false,
                onlyCreateEdit: false,
                uniqueCheck: false,
                modelCode: "view_575743139269050368",
                modelField: "view_575743139269050368.widget_575743139537485825",
                fieldFullName: "评分组件-评分值",
                children: [],
                showDesensitizationMark: false,
                lovAssociated: false,
                enableRule: false,
                showLocationCenter: false,
                userPermission: false,
                useInEdit: false,
                dataEncryptStatus: false,
                dataEncryptDisabled: false,
                saved: true,
                saveWithHidden: false,
                isArraySubitem: false,
                deleteButtonStatus: "ENABLE",
                copyButtonStatus: "ENABLE",
                newButtonStatus: "ENABLE",
                titleDescription: "",
                importButtonStatus: "ENABLE",
                exportButtonStatus: "ENABLE",
                mobileDisplayNum: 3,
                mobileSonTableIndex: false,
                modelName: "评分组件",
                modelFieldName: "评分值",
                validatorStatus: false,
                mobileWidth: 12,
                labelI18nAssociated: false,
                placeholderI18nAssociated: false,
                titleDescriptionI18nAssociated: false,
                titleDescriptionOptionsI18nAssociated: false,
                staticDefaultValueI18nAssociated: false,
                queryPageNum: 50,
                tabDisplayFlag: true,
              },
            ],
          },
        },
      },
    };
  },
  // 计算属性
  computed: {
    listStr() {
      return this.list.join(",") + "，赵六";
    },
    listSet: {
      // 原数据是一个数组，在不影响原数据的情况下，返回一个字符串
      get() {
        return this.list.join(",") + "，赵六2";
      },
      // 修改原数据
      set(val) {
        this.list = val;
      },
    },
    jsonStrCom: {
      get() {
        return this.jsonStr;
      },
      set(val) {
        this.jsonStr = JSON.stringify(val);
      },
    },
    uuidStr() {
      return this.resData.xdapFormConfig.detailPage.formComponents
        .map((item) => item.uuid)
        .join(",");
    },
  },
  watch() {},
  mounted() {
    console.log("页面加载完成");
    this.$nextTick(() => {
      console.log("页面渲染完成");
    });
  },
  created() {
    console.log("页面创建完成");
  },
  beforeDestroy() {
    console.log("页面销毁之前调用");
  },
  methods: {
    editList() {
      this.listSet = ["张三"];
    },
    editJsonStr() {
      let obj = {
        name: "张三",
        children: [
          {
            name: "李四",
          },
        ],
      };
      this.jsonStrCom = obj;
    },
  },
};
</script>

<style scoped>
.title {
  background-color: #000;
}
</style>
